
import QtQuick 2.12
import QtQuick.Controls 2.12
import Qt.labs.qmlmodels 1.0

Item {

    id: root

    signal openCsvFile(string filePath)

    z: 10
    anchors.fill: parent
    implicitHeight: parent.height
    implicitWidth: parent.width
    property int headerHeight: 48
    property int rowHeight: 48
    property int tableLeft: 100
    property color scrollBarColor: "#E5E5E5"
    property int scrollBarWidth: 7
    property variant columnWidthArr: [(root.width - root.tableLeft)/ 2, (root.width - root.tableLeft)/ 2]
    property var horHeader: ["名称", "格式"]
    property int selected: -1
    property var datas
    Component.onCompleted: {
        // root.openCsvFile('test.csv')
    }
//     property var datas: [ {
//     "isChecked": false,
//     "id": 1,
//     "name": "汽车曲轴分拣项目1",
//     "type": "mission"
// }, {
// "isChecked": false,
// "id": 2,
// "name": "汽车曲轴分拣项目2",
// "type": "mission"
// }, {
// "isChecked": false,
// "id": 3,
// "name": "汽车曲轴分拣项目3",
// "type": "mission"
// }, {
// "isChecked": false,
// "id": 4,
// "name": "汽车曲轴分拣项目4",
// "type": "mission"
// }, {
// "isChecked": false,
// "id": 5,
// "name": "汽车曲轴分拣项目5",
// "type": "mission"
// }, {
// "isChecked": false,
// "id": 6,
// "name": "汽车曲轴分拣项目6",
// "type": "mission"
// }, {
// "isChecked": false,
// "id": 7,
// "name": "汽车曲轴分拣项目7",
// "type": "mission"
// }, {
// "isChecked": false,
// "id": 8,
// "name": "汽车曲轴分拣项目8",
// "type": "mission"
// }, {
// "isChecked": false,
// "id": 9,
// "name": "汽车曲轴分拣项目9",
// "type": "mission"
// }, {
// "isChecked": false,
// "id": 10,
// "name": "汽车曲轴分拣项目10",
// "type": "mission"
// }, {
// "isChecked": false,
// "id": 11,
// "name": "汽车曲轴分拣项目11",
// "type": "mission"
// } ]

//数据展示
TableView {
    id: table
    anchors {
        fill: parent
        topMargin: root.rowHeight
        leftMargin: root.tableLeft
    }
    clip: true
    boundsBehavior: Flickable.StopAtBounds
    columnSpacing: 0
    rowSpacing: 0
    //内容行高
    rowHeightProvider: function (row){
    return root.headerHeight
}
//内容列的列宽
columnWidthProvider: function (column){
return root.columnWidthArr[column]
}

ScrollBar.vertical: ScrollBar {
id: scroll_vertical
anchors.right: parent.right
anchors.rightMargin: 0
contentItem: Rectangle {
visible: (scroll_vertical.size < 1.0)
implicitWidth: root.scrollBarWidth
color: root.scrollBarColor
}
}

ScrollBar.horizontal: ScrollBar {
id: scroll_horizontal
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.left: parent.left
anchors.leftMargin: -root.tableLeft
contentItem: Rectangle {
visible: (scroll_horizontal.size < 1.0)
implicitHeight: root.scrollBarWidth
color: root.scrollBarColor
}
}

model: TableModel {
TableModelColumn {
    display: "name"
}
TableModelColumn {
    display: "type"
}
rows: root.datas
}

delegate: Rectangle {
color: table.model.rows[row].isChecked ? "#EAF1FF": "white"
Text {
    anchors.fill: parent
    verticalAlignment: Text.AlignVCenter
    horizontalAlignment: Text.AlignHCenter

    text: display
    font.pixelSize: 15
    color: "#707070"
}
Rectangle {
    color: "#E5E5E5"
    width: parent.width
    height: 1
    anchors {
        bottom: parent.bottom
    }
}
MouseArea {
    anchors.fill: parent
    onClicked: {
        root.datas[row].isChecked = !root.datas[row].isChecked
            table.model.rows = root.datas

            if (checkBox.isChecked
                && !root.datas[row].isChecked){
            checkBox.isChecked = false
        }
    }
}
}
}

//全选按钮
Rectangle {
    width: root.tableLeft
    height: root.rowHeight - 1
    color: "#F8F8F8"
    anchors {
        top: parent.top
        left: parent.left
    }
    CheckBox {
        property bool isChecked: false
        id: checkBox
        state: isChecked ? "isChecked": "noCheck"
        anchors {
            verticalCenter: parent.verticalCenter
            left: parent.left
            leftMargin: 20
        }
        onClicked: {
            checkBox.isChecked = !checkBox.isChecked
            let count = root.datas.length
            if (!count){
            return false
        }
        for (var i = 0; i < count; i++){
        if (checkBox.isChecked)
        {
            root.datas[i].isChecked = true
            } else {
            root.datas[i].isChecked = false
            }
        }
        table.model.rows = root.datas
    }
}

Text {
    anchors {
        verticalCenter: checkBox.verticalCenter
        left: checkBox.right
        leftMargin: 20
    }
    text: checkBox.isChecked ? "取消": "全选"
    font.pixelSize: 18
    color: "#707070"
}
Rectangle {
    height: 1
    width: parent.width
    anchors.bottom: parent.bottom
    color: "#E5E5E5"
}
Rectangle {
    height: 1
    width: parent.width
    anchors.top: parent.top
    color: "#E5E5E5"
}
}

//表头
Item {
    anchors {
        left: parent.left
        right: parent.right
        leftMargin: root.tableLeft
    }
    height: root.rowHeight
    z: 2
    Row {
        anchors.fill: parent
        leftPadding: -table.contentX
        clip: true
        spacing: 0
        Repeater {
            model: table.columns > 0 ? table.columns: 0
            Rectangle {
                width: table.columnWidthProvider(
                index)+ table.columnSpacing
                height: root.rowHeight - 1
                color: "#F8F8F8"
                Text {
                    anchors.centerIn: parent
                    text: root.horHeader[index]
                    font.pixelSize: 18
                    color: "#707070"
                }
                Rectangle {
                    height: 1
                    width: parent.width
                    anchors.bottom: parent.bottom
                    color: "#E5E5E5"
                }
                Rectangle {
                    height: 1
                    width: parent.width
                    anchors.top: parent.top
                    color: "#E5E5E5"
                }
            }
        }
    }
}

//每一行前面加多选框
Column {
    anchors {
        top: parent.top
        bottom: parent.bottom
        topMargin: root.headerHeight
    }
    topPadding: -table.contentY
    z: 2
    clip: true
    spacing: 1
    Repeater {
        model: table.rows > 0 ? table.rows: 0
        Rectangle {
            width: root.tableLeft
            height: table.rowHeightProvider(index)
            color: "white"
            CheckBox { //自定义多选框组件
                state: table.model.rows[index].isChecked ? "isChecked": "noCheck"
                anchors.centerIn: parent
                onClicked: {
                    root.datas[index].isChecked = !root.datas[index].isChecked
                        table.model.rows = root.datas
                        if (checkBox.isChecked && !root.datas[index].isChecked)
                        {
                            checkBox.isChecked = false
                        }
                    }
                }
            }
        }
    }

}

